<!--
 * @description  : 特殊区域列表展示组件
 * @descriptionDetail: 特殊区域列表展示组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-26 15:57:44
-->
<template>
  <view>
    <u-row gutter="16" @click.native="handlerCheckDetail()">
      <u-col :span="client.checkStatus?'9':'12'">
        <view class="title">
          <u-icon v-if="client.typeName" :label="client.areaName+'('+client.typeName+')'" size="30"
            name="../../static/storage/icon_qyb.png"></u-icon>
          <u-icon v-else :label="client.areaName" size="30" name="../../static/storage/icon_qyb.png"></u-icon>
        </view>
      </u-col>
      <u-col span="3" class="u-p-r-30" v-if="client.checkStatus">
        <view :class="'status status-' + client.checkStatus">
          {{ client.checkStatusText }}
        </view>
      </u-col>
      <u-col span="12">
        <view class="sub-title address">
          {{ client.address || '' }}
        </view>
      </u-col>
      <u-col span="12">
        <view class="sub-title address">
          {{ client.orgName || '' }}
        </view>
      </u-col>
      <u-col span="12" v-if="client.signInTime">
        <view class="sub-title address">
          签到时间：{{ client.signInTime || '' }}
        </view>
      </u-col>
      <u-col span="12" v-if="client.signOutTime">
        <view class="sub-title address">
          签离时间：{{ client.signOutTime || '' }}
        </view>
      </u-col>
    </u-row>
    <u-row class="sub-title u-p-t-10 u-p-l-5" gutter="16">
      <u-col span="4">
        <u-icon :label="client.manager" size="30" name="../../static/check/manager.png"></u-icon>
      </u-col>
      <u-col span="4">
        <u-icon label="电话" size="28" v-if="client.telephone" name="phone-fill" :color="$theme.u_type_primary"
          @click.native="handlerShowPhone"></u-icon>
        <u-icon label="电话" size="28" v-else name="phone-fill" @click.native="handlerShowPhone"></u-icon>
      </u-col>
      <!-- 计划状态不是“已完成”、检查状态为 “未检查”、签到时间没有值 -->
      <u-col span="4"
        v-if="clickSpecialData.planStatus != M_PLAN_STATUS.ENDED && clickSpecialData.planStatus != M_PLAN_STATUS.OVERDUE && clickSpecialData.checkStatus == M_COMMON_CHECK_STATUS.NOTCHECK && !clickSpecialData.signInTime">
        <u-icon label="签到" size="40" name="../../static/check/round-checkin.png" @click.native="handlerSign"></u-icon>
      </u-col>
    </u-row>
    <!-- 手工签到 -->
    <u-action-sheet :list="signList" v-model="signSheetShow" @click="handlerSign"></u-action-sheet>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service";
import { dateUtils, } from "@/common/util";
import { M_PLAN_STATUS, M_COMMON_CHECK_STATUS, } from "@/service/check/mapping/enum.js";
import { SET_MAP_LAT_LON } from '@/config/setting.config.js';
export default {
  name: "AreasItem",
  props: {
    client: {
      type: Object,
      default: () => { },
    },
    isClick: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      M_PLAN_STATUS,
      M_COMMON_CHECK_STATUS,
      tels: [],
      clickSpecialData: {},
      signList: [],
      signSheetShow: false,
      longitude: 0, // 经度
      latitude: 0,  // 纬度
    }
  },
  watch: {
    client: {
      immediate: true,
      handler () {
        this.clickSpecialData = this.client;
        this.$forceUpdate();
      },
    },
  },
  mounted () {
    this.getLocation();
  },
  methods: {
    // 显示联系电话
    handlerShowPhone (e) {
      if (this.client.telephone == null || this.client.telephone == '') {
        this.$modal.alert("当前特殊区域未维护电话");
        return;
      }
      if (this.client.telephone) {
        if (!this.tels.includes(this.client.telephone)) {
          this.tels.push(this.client.telephone);
        }
      }
      if (this.tels.length > 0) {
        // 此处不能使用u-action-sheet，在u-swipe-action中使用时样式异常
        uni.showActionSheet({
          itemList: this.tels,
          itemColor: this.$theme.u_type_primary,
          success: ({ tapIndex, }) => this.doPhone(this.tels[tapIndex]),
        });
        return;
      }
      e.stopPropagation();
      e.preventDefault();
    },
    // 拨打电话
    doPhone (telStr) {
      let tel = telStr.substring(telStr.indexOf(" "));
      this.$deviceApi.phone(tel);
    },
    // 手工签到原因
    queryCheckSignReason () {
      checkService.bscCodesMap("M_CHECK_HANDSIGN_REASON").then(dr => {
        if (dr.success) {
          dr.bean['M_CHECK_HANDSIGN_REASON'].forEach(c => this.signList.push({ type: c.bcbCode, text: c.bcbName, color: "#007aff", }));
        }
      });
    },
    // 检查详情
    handlerCheckDetail () {
      if (!this.isClick) {
        return;
      }
      // 如果计划状态为 02已完成，则不能补录，也不能查看。detail.planStatus != '02'
      if (this.clickSpecialData.planStatus != M_PLAN_STATUS.ENDED && this.clickSpecialData.planStatus != M_PLAN_STATUS.OVERDUE) {
        // 未检查 （移动端需要签到）字典没改之前是1，改之后变成01 detail.checkStatus == '01'
        if (this.clickSpecialData.checkStatus == M_COMMON_CHECK_STATUS.NOTCHECK && !this.clickSpecialData.signInTime) {
          // 签到原因
          this.$u.toast("请先签到！");
          return;
        } else {
          this.setRouteParam(this.clickSpecialData);
          this.$u.route('/pages/check/specialAreasCheckDetail');
          return;
        }
      }
    },
    handlerSign () {
      this.checkSign('04', '');
    },
    // 定位
    getLocation () {
      if (this.$deviceApi.geolocation) {
        this.$deviceApi.geolocation().then((geo) => {
          this.longitude = geo.longitude;
          this.latitude = geo.latitude;
        });
      } else {
        // 示例坐标
        this.longitude = SET_MAP_LAT_LON[0];
        this.latitude = SET_MAP_LAT_LON[1];
      }
    },
    // 签到 reasonCode手工签到编码
    checkSign (signType, reasonCode) {
      let isHaveLngLat = false;
      if (this.longitude == 0 && this.latitude == 0) {
        this.getLocation();
        return;
      }
      this.$u.loading('正在计算当前位置...');
      this.clickSpecialData.signType = signType; // 签到方式
      this.clickSpecialData.signLongitude = this.longitude;
      this.clickSpecialData.signLatitude = this.latitude;
      this.clickSpecialData.isDeviate = 0;
      // 计算签到距离
      if (this.clickSpecialData.longitude && this.clickSpecialData.latitude) {
        isHaveLngLat = true;
        let p1 = new AMap.LngLat(this.clickSpecialData.signLongitude, this.clickSpecialData.signLatitude);
        let p2 = new AMap.LngLat(this.clickSpecialData.longitude, this.clickSpecialData.latitude);
        this.clickSpecialData.deviateDistance = Math.round(p1.distance(p2));
        console.log('两点相距=' + this.clickSpecialData.deviateDistance);
        if (this.clickSpecialData.deviateDistance > 1000) {
          this.clickSpecialData.isDeviate = 1;
        }
      } else {
        // 没有坐标默认偏离
        this.clickSpecialData.isDeviate = 1;
      }
      this.$u.hideLoading();
      // 如果当前位置与零售位置相差1000米则提示
      if (this.clickSpecialData.isDeviate == 1 && isHaveLngLat) {
        this.$modal.confirm(
          '您当前位置距离零售户' + this.clickSpecialData.deviateDistance + '米，是否继续签到？',
          '提示',
          () => {
            this.doSignIn();
          },
          () => {
            this.getLocation();
          },
          '确定',
          '稍后重试'
        );
      } else {
        this.doSignIn();
      }
    },
    // 提交签到
    doSignIn () {
      this.$u.loading('正在签到...');
      this.clickSpecialData.signInTime = dateUtils.dateFormat('yyyy-MM-dd HH:mm:ss', new Date());
      this.clickSpecialData.checkUuid = this.clickSpecialData.planAreaUuid;
      this.clickSpecialData.groupUuid = '00'; // 先暂时这样写
      let signTask = this.$u.deepClone(this.clickSpecialData);
      checkService
        .saveClientSign(signTask)
        .then((dr) => {
          this.$u.hideLoading();
          if (dr.success) {
            this.$u.toast('签到成功！');
            setTimeout(() => {
              this.setRouteParam(this.clickSpecialData);
              this.$u.route('/pages/check/specialAreasCheckDetail');
            }, 1000);
          } else {
            this.$u.toast('签到失败: ' + dr.msg);
          }
        })
        .catch((err) => {
          this.$u.hideLoading();
          this.$u.toast(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
  margin: 5px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 4px;
}
.address {
  padding-left: 4px;
}
.status {
  padding: 2px;
  width: 112rpx;
  height: 56rpx;
  line-height: 48rpx;
  text-align: center;
  border-radius: 28rpx;
  float: right;
  font-size: 24rpx;
}
// 灰色
.status-00 {
  color: #717579;
  background: #edeeef;
}
// 蓝色
.status-01 {
  color: #0079f2;
  background: #e0ecff;
}
// 绿色
.status-02 {
  color: #20ab5c;
  background: #dbf4e6;
}
</style>
